.material {
  @extend %flex-center-nowrap;

  div {
    display: inline-block;
    margin-left: 10px;
  }

  mpiece {
    margin-left: -10px;
    background-size: cover;
    display: inline-block;

    &.pawn {
      background-image: url(../piece/mono/P.svg);
    }

    &.bishop {
      background-image: url(../piece/mono/B.svg);
    }

    &.knight {
      background-image: url(../piece/mono/N.svg);
    }

    &.rook {
      background-image: url(../piece/mono/R.svg);
    }

    &.queen {
      background-image: url(../piece/mono/Q.svg);
    }

    &.king {
      background-image: url(../piece/mono/K.svg);
    }

    @if $theme == 'transp' {
      filter: brightness(1.3) drop-shadow(0 1px 1px #000);
    }
  }

  score {
    font-family: 'Roboto';
  }
}
